{{ header }}{{ column_left }}{{ column_right }}
<div class="container">
  {{ content_top }}
  <form class="payment-form" method="POST" action="{{ process_order }}">
    <div style="text-align:center;">
      <h3>{{ heading_confirm }}</h3>
      <div style="display: inline-block; width: 400px; height: 185px;" id="readOnlyAddressBookWidgetDiv"></div>
      <br>
      <div style="display: inline-block; width: 400px; height: 185px;" id="readOnlyWalletWidgetDiv"></div>
    </div>
    <div style="clear: both;"></div>
  </form>
  <div class="checkout-product" style="margin-top: 15px">
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <td class="text-left">{{ column_name }}</td>
          <td class="text-left">{{ column_model }}</td>
          <td class="text-right">{{ column_quantity }}</td>
          <td class="text-right">{{ column_price }}</td>
          <td class="text-right">{{ column_total }}</td>
        </tr>
      </thead>
      <tbody>
        {% for product in products %}
          <tr>
            <td class="text-left">{{ product.name }}
              {% for option in product.option %}
                <br/>
                &nbsp;
                <small> - {{ option.name }}: {{ option.value }}</small> {% endfor %}</td>
            <td class="text-left">{{ product.model }}</td>
            <td class="text-right">{{ product.quantity }}</td>
            <td class="text-right">{{ product.price }}</td>
            <td class="text-right">{{ product.total }}</td>
          </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        {% for total in totals %}
          <tr>
            <td colspan="4" class="text-right"><strong>{{ total.title }}:</strong></td>
            <td class="text-right">{{ total.text }}</td>
          </tr>
        {% endfor %}
      </tfoot>
    </table>
  </div>
  <div class="d-inline-block pt-2 pd-2 w-100">
    <div class="float-left"><a href="{{ back }}" class="btn btn-primary">{{ text_back }}</a></div>
    <div class="float-right">
      <input class="btn btn-primary" id="confirm-button" type="submit" value="{{ text_confirm }}"/>
    </div>
  </div>
  {{ content_bottom }} </div>
<script>
$(document).ready(function() {
	amazon.Login.setClientId('{{ payment_amazon_login_pay_client_id }}');

	new OffAmazonPayments.Widgets.AddressBook({
		sellerId: '{{ payment_amazon_login_pay_merchant_id }}',
		amazonOrderReferenceId: '{{ AmazonOrderReferenceId }}',
		displayMode: "Read",
		design: {
			designMode: 'responsive'
		},
		onError: function(error) {
          {% if payment_amazon_login_pay_test %}
			console.log("Amazon Login Error for Address (" + error.getErrorCode() + "): " + error.getErrorMessage());
          {% endif %}
		}
	}).bind("readOnlyAddressBookWidgetDiv");

	new OffAmazonPayments.Widgets.Wallet({
		sellerId: '{{ payment_amazon_login_pay_merchant_id }}',
		amazonOrderReferenceId: '{{ AmazonOrderReferenceId }}',
		displayMode: "Read",
		design: {
			designMode: 'responsive'
		},
		onError: function(error) {
          {% if payment_amazon_login_pay_test %}
			console.log("Amazon Login Error for Wallet (" + error.getErrorCode() + "): " + error.getErrorMessage());
          {% endif %}
		}
	}).bind("readOnlyWalletWidgetDiv");

	$('#confirm-button').click(function() {
		if ($(this).attr('disabled') != 'disabled') {
			$('.payment-form').submit();
		}

		$(this).attr('disabled', 'disabled');
	});
});
//--></script>
{{ footer }}